<template>
  <div class="store-value">
    <el-row class="container">
      <div class="title">状态：</div>
      <el-switch v-model="able_deposit" active-color="#13ce66" inactive-color="#ff4949" active-text="开启储值" inactive-text="关闭储值" />
    </el-row>
    <el-row class="container">
      <div class="title">储值规则：</div>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </el-row>
    <el-row v-for="(item, index) of deposit_conf" :key="index" class="container">
      <div class="title" style="width: 40px">储：</div>
      <el-input v-model="item.amount" style="width: 200px;margin-right: 20px" />
      <div class="title" style="width: 40px">送：</div>
      <el-input v-model="item.give" style="width: 200px" />
      <el-button v-show="index >= 1" style="margin-left: 20px" type="primary" @click="handleDelete(index)">删除</el-button>
    </el-row>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
</template>

<script>
import { getStoredValue, storedValue } from '@/api/params'
export default {
  name: 'StoreValue',
  data() {
    return {
      able_deposit: false,
      deposit_conf: [
        {
          amount: 1000,
          give: 0
        },
        {
          amount: 3000,
          give: 0
        },
        {
          amount: 5000,
          give: 0
        }
      ],
      rule: true
    }
  },
  created() {
    this.getStore()
  },
  methods: {
    handleSave(e) {
      this.postStore()
    },
    async getStore() {
      const res = await getStoredValue()
      const { able_deposit, deposit_conf } = res.data.store
      if (deposit_conf) {
        if (JSON.parse(deposit_conf).length) {
          this.deposit_conf = JSON.parse(deposit_conf)
        }
      } else {
        this.deposit_conf = [{ amount: '', give: '' }]
      }
      this.able_deposit = Number(able_deposit) === 1
    },
    async postStore() {
      const type = 'store'
      const { able_deposit, deposit_conf } = this
      const state = able_deposit ? 1 : 0
      const result = this.handleCheckRule()
      if (!this.rule) return
      if (able_deposit) {
        await storedValue({ type, deposit_conf: JSON.stringify(deposit_conf), able_deposit: state })
      } else {
        await storedValue({ type, deposit_conf: JSON.stringify(result), able_deposit: state })
      }
      this.$message.success({
        message: '保存成功',
        duration: 1000
      })
    },
    // 新增储值
    handleAdd() {
      if (this.deposit_conf.length >= 3) {
        this.$message.warning({
          message: '储值规则不能大于3个',
          duration: 1000
        })
        return
      }
      this.deposit_conf.push({ amount: '', give: '' })
    },
    // 检测储值规则
    handleCheckRule() {
      const result = [...this.deposit_conf]
      for (let i = result.length - 1; i >= 0; i--) {
        const item = result[i]
        if (Number(item.amount) < 1 && !isNaN(parseInt(item.amount))) {
          this.$message.warning({
            message: `储值规则第${i + 1}储不能小于1`,
            duration: 1000
          })
          this.rule = false
          break
        } else if (Number(item.give) < 0 && !isNaN(parseInt(item.give))) {
          this.$message.warning({
            message: `储值规则第${i + 1}送不能小于0`,
            duration: 1000
          })
          this.rule = false
          break
        } else if (item.give.toString().trim() === '' || item.amount.toString().trim() === '') {
          result.splice(i)
        }
      }
      return result
    },
    // 删除
    handleDelete(index) {
      this.deposit_conf.splice(index)
    }
  }
}
</script>

<style lang="scss" scoped>
.store-value {
  width: 100%;
  .container {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .title {
      width: 100px;
    }
    .input-container{
      width: 300px;
    }
  }
}
</style>
